<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初心富文本</title>
    <link rel="stylesheet" href="./css/text.css">
    <link rel="stylesheet" href="./dist/swiper.css">
    <script src="./dist/swiper.js"></script>
</head>

<body>
    <div class="homepage  ">
        <!-- header 头部开始 -->
        <div class="header w">
            <div class="header-t w">
                <div class="header-l"><img src="./images/logo.png" alt=""></div>
                <div class="header-c">
                    <ul class="clearfix">
                        <li class="ht">
                            <a href="#">首页</a>
                        </li>
                        <li class="ht">
                            <a href="#">找工作</a>
                        </li>
                        <li class="ht">
                            <a href="#">超神学院</a>
                        </li>
                        <li class="ht">
                            <a href="#">最新活动</a>
                        </li>
                        <li class="ht">
                            <a href="#">关于我们</a>
                        </li>
                    </ul>
                </div>
                <div class="header-r">
                    <ul class="clearfix">
                        <li class="ht"><a href="#">登录</a></li>
                        <li class="ht"><a href="#">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- header 头部结束 -->
        <!-- center 主体部分开始 -->
        <div class="center w">
            <div class="center-l">
                <div class="center-l-top">
                    <div><span>文章标题：</span><input type="text" placeholder=" 请输入文章标题"></div>
                    <div><span>文章分类：</span><select>
                            <option value="选择分类">选择分类</option>
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="opel">Opel</option>
                            <option value="audi">Audi</option>
                            </select></div>
                </div>
                <div id="editor"></div>
                <div class="publish"><a href="#">发布文章</a></div>
            </div>
            <!-- 开班动态 -->
            <div class="center-r">
                <div class="dynamic">
                    <div>
                        <h2>开班动态</h2>
                    </div>
                    <p>高级前端全栈04期 <span>2019-10-10</span></p>
                    <p>高级前端全栈05期 <span>2019-10-10</span></p>
                    <p>高级前端全栈06期 <span>2019-10-10</span></p>
                    <p>高级前端全栈07期 <span>2019-10-10</span></p>
                    <p>高级前端全栈08期 <span>2019-10-10</span></p>
                </div>
                <!-- 最新动态 -->
                <div class="dynamic">
                    <div>
                        <h2>最新动态</h2>
                    </div>
                    <p>毕业学员找工作经验分享</p>
                    <p>高薪秘诀都在这里</p>
                    <p>最详细的前端面试解答题</p>
                    <p>上班第一天应该做那些事</p>
                    <p>技术学习的方法和认知</p>
                </div>
                <!-- 联系我们 -->
                <div class="dynamic">
                    <div>
                        <h2>联系我们</h2>
                    </div>
                    <p>微信号：gzx2550</p>
                    <p>QQ号：2550950527</p>
                    <p>联系地址：武汉市江夏区关南园一路当代梦工厂</p>
                </div>
                <!-- center 主体部分结束 -->

            </div>
</body>

</html>
<script src="./dist/jquery-3.4.0.min.js"></script>
<script src="./dist/wangEditor.min.js"></script>
<script>
    // 头部a
    $('.ht a').mouseenter(function() {
        $(this).css({
            color: '#ffd04b',
            borderBottom: '1px solid #ffd04b'
        }).siblings().css({
            color: '#fff'

        })
    });

    $('.ht a').mouseleave(function() {
        $(this).css({
            color: '#fff',
            borderBottom: '1px solid #24292e'
        })
    });

    // 轮播图
    var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',

        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    });
    // 中部a
    $('.banner-bottom a').mouseenter(function() {
        $(this).css({
            color: '#409eff'
        }).siblings().css({
            color: '#000'
        })
    });
    $('.banner-bottom a').mouseleave(function() {
        $(this).css({
            color: '#000'
        })
    });
    var E = window.wangEditor
    var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
    editor.create()
</script>